<template>
	<div  class="container">
		<el-page-header @back="goBack" content="基础设置"></el-page-header>
		<el-form ref="form" :model="form" label-width="230px" class="views-form">
			<el-form-item label="网站名称">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="版权信息">
				<el-input v-model="form.copyright"></el-input>
			</el-form-item>
			<el-form-item label="联系热线">
				<el-input v-model="form.telphone"></el-input>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="form.address"></el-input>
			</el-form-item>
			<el-form-item label="短信账号">
				<el-input v-model="form.smsaccount"></el-input>
			</el-form-item>
			<el-form-item label="短信密码">
				<el-input v-model="form.smspassword"></el-input>
			</el-form-item>
			<!-- <el-form-item label="接单超时时限（客户组：分钟）">
				<el-input v-model="form.receivingtimelimit"></el-input>
			</el-form-item> -->
			<el-form-item label="小哥行程间隔时间（客户组：分钟）">
				<el-input v-model="form.brothertripintervaltime"></el-input>
			</el-form-item>
			<el-form-item label="限制微信一次提现金额（元）">
				<el-input v-model="form.withdrawalsinglelimit"></el-input>
			</el-form-item>
			<el-form-item label="限制微信每人每天提现金额（元）">
				<el-input v-model="form.withdrawaldailylimit"></el-input>
			</el-form-item>
			<el-form-item label="提现自动审核金额（元）">
				<el-input v-model="form.withdrawalautoexamine"></el-input>
			</el-form-item>
			<el-form-item label="微信余额不足提醒值（元）">
				<el-input v-model="form.wxbalanceremindvalue"></el-input>
			</el-form-item>
			<el-form-item :label="`用户每元使用积分比例（分）`">
				<el-input v-model="form.userswapratio"></el-input>
			</el-form-item>
			<el-form-item label="客户组每元使用积分比例（分）">
				<el-input v-model="form.swapratio"></el-input>
			</el-form-item>
			<el-form-item label="差额百分比（%）">
				<el-input v-model="form.differenceratio"></el-input>
			</el-form-item>
			
			<!-- <el-form-item label="地图WebKey">
				<el-input v-model="form.mapwebkey"></el-input>
			</el-form-item>
			<el-form-item label="地图安卓Key">
				<el-input v-model="form.mapandroidkey"></el-input>
			</el-form-item>
			<el-form-item label="地图微信Key">
				<el-input v-model="form.mapwxkey"></el-input>
			</el-form-item>
			<el-form-item label="绑定支付的APPID">
				<el-input v-model="form.wx_appid" placeholder="（必须配置）"></el-input>
			</el-form-item>
			<el-form-item label="商户号">
				<el-input v-model="form.wx_mchid" placeholder="（必须配置）"></el-input>
			</el-form-item>
			<el-form-item label="商户支付密钥">
				<el-input v-model="form.wx_key" placeholder="参考开户邮件设置（必须配置）"></el-input>
			</el-form-item>
			<el-form-item label="支付结果通知url">
				<el-input v-model="form.wx_url"></el-input>
			</el-form-item>
			<el-form-item label="公众账号secert">
				<el-input v-model="form.wx_appsecret" placeholder="（仅JSAPI支付的时候需要配置）"></el-input>
			</el-form-item>
			<el-form-item label="证书路径">
				<el-input v-model="form.wx_sslcert_path" placeholder="注意应该填写绝对路径（仅退款、撤销订单时需要）"></el-input>
			</el-form-item>
			<el-form-item label="证书密码">
				<el-input v-model="form.wx_sslcert_password" placeholder="（仅退款、撤销订单时需要）"></el-input>
			</el-form-item> -->
			<el-form-item label="经营范围">
				<div class="e-m-b-10">
					<el-tag class="e-m-r-15" type="info" v-for="(item,index) in citybusiness" :key="index">{{ item.name }}</el-tag>
					<span class="link-blue" @click="setcity = !setcity"><i class="el-icon-edit"></i>设置范围</span>
				</div>
				<el-cascader v-if="setcity" separator="-" @change="SelectSearchCity" filterable :props="{
					lazy: true,
					checkStrictly: true,
					multiple:false,
					lazyLoad: loadCity,
					label: 'name',
					value: 'id',
					multiple: true
				}" placeholder="选择地区" style="width: 100%;margin-right: 20px" clearable></el-cascader>
			</el-form-item>
			<el-form-item label="前台logo">
				<el-upload class="avatar-uploader" :action="fileUploadURL" :headers="headers" :show-file-list="false"
					:on-success="handleLogoSuccess" :before-upload="beforeUpload">
					<img v-if="form.sitelogoimg!=''" :src="fileURL+form.sitelogoimg" style="width:200px;height:200px">
					<i v-else class="el-icon-plus avatar-uploader-icon" style="width:200px;height:200px"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="后台logo">
				<el-upload class="avatar-uploader" :action="fileUploadURL" :headers="headers" :show-file-list="false"
				:on-success="handleLogo2Success" :before-upload="beforeUpload">
				<img v-if="form.adminlogoimg!=''" :src="fileURL+form.adminlogoimg" class="avatar" style="width:200px;height:200px">
				<i v-else class="el-icon-plus avatar-uploader-icon" style="width:200px;height:200px"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="微信公众号二维码">
				<el-upload class="avatar-uploader" :action="fileUploadURL" :headers="headers" :show-file-list="false"
				:on-success="handleWxqrcodeSuccess" :before-upload="beforeUpload">
				<img v-if="form.wxqrcode!=''" :src="fileURL+form.wxqrcode" class="avatar" style="width:200px;height:200px">
				<i v-else class="el-icon-plus avatar-uploader-icon" style="width:200px;height:200px"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="网站是否维护">
				<el-switch
					v-model="form.ismaintain"
					>
				</el-switch>
			</el-form-item>
			<el-form-item label="网站维护信息" v-if="form.ismaintain">
				<el-input
					type="textarea"
					:rows="4"
					placeholder="网站维护信息不能超过50个字"
					:show-word-limit="true"
					v-model="form.maintainmsg">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">确定</el-button>
				<!-- <el-button @click="goBack">返回列表</el-button> -->
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		layout: 'admin',
    head() {
      return {
          title:'基础信息-' + this.websetting.name
      }
    },
		data() {
			return {
				imageUrl: '',
				form: {
					id: 0,
					name: "", //网站名称
					copyright: "", //版权信息
					telphone: "", //联系热线
					address: "", //地址
					smsaccount: "", //短信账号
					smspassword: "", //短信密码
					wxqrcode: "", //微信公众号二维码
					sitelogoimg: "", //前台Logo
					adminlogoimg: "", //后台Logo
					receivingtimelimit: 30, //接单超时时限(客户组：分钟)
					brothertripintervaltime: 3, //小哥行程间隔时间(客户组：分钟)
					mapwebkey: "", //地图WebKey
					mapandroidkey: "", //地图安卓Key
					mapwxkey: "", //地图微信Key
					wx_appid: "", //绑定支付的APPID（必须配置）
					wx_mchid: "", //商户号（必须配置）
					wx_key: "", //商户支付密钥，参考开户邮件设置（必须配置）
					wx_url: "", //支付结果通知url
					wx_appsecret: "", //公众账号secert（仅JSAPI支付的时候需要配置）
					wx_sslcert_path: "", //证书路径,注意应该填写绝对路径（仅退款、撤销订单时需要）
					wx_sslcert_password: "", //证书密码（仅退款、撤销订单时需要）
					withdrawalsinglelimit: 0, //限制微信一次提现金额
  					withdrawaldailylimit: 0, //限制微信每人每天提现金额
          			withdrawalautoexamine:0,//提现自动审核金额
		  			wxbalanceremindvalue: 0, //微信余额不足提醒值（元）
					ismaintain: false, //网站是否维护
					maintainmsg: "", //网站维护信息,网站维护信息不能超过50个字
					userswapratio: 0, //用户兑换积分比例
					swapratio: 0, //客户组兑换积分比例
					differenceratio: 0, //差额百分比
				},
				citybusiness: [],
				setcity: false,
				cityids: [],
				isAddCity: false
			}
		},
		mounted() {
			this.getsetting()
		},
		computed: {
			headers() {
				return this.$store.state.header
			}
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			getsetting() {
				this.cityids = []
				this.$axios.get('/Admin/SiteSetting/Details').then((res) => {
					this.form = res.sitesetting;
					this.citybusiness = res.citybusiness
					this.citybusiness.forEach((item)=>{
						this.cityids.push(item.cityid)
					})
					console.log(res)
				})
			},
			handleLogoSuccess(res, file) {
				// this.imageUrl = URL.createObjectURL(file.raw);
				this.form.sitelogoimg = file.response.datas.path

				// this.form.wordpath = res.path;
				// this.form.wordname = file.name;
			},
			handleLogo2Success(res, file) {
				this.form.adminlogoimg = file.response.datas.path
			},
			handleWxqrcodeSuccess(res, file) {
				this.form.wxqrcode = file.response.datas.path
			},
			beforeUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			onSubmit() {
				this.$axios.post('/Admin/SiteSetting/Set', {
					name: this.form.name, //网站名称
					copyright: this.form.copyright, //版权信息
					telphone: this.form.telphone, //联系热线
					address: this.form.address, //地址
					smsaccount: this.form.smsaccount, //短信账号
					smspassword: this.form.smspassword, //短信密码
					wxqrcode: this.form.wxqrcode, //微信公众号二维码
					sitelogoimg: this.form.sitelogoimg, //前台Logo
					adminlogoimg: this.form.adminlogoimg, //后台Logo
					receivingtimelimit: this.form.receivingtimelimit, //接单超时时限(客户组：分钟)
					brothertripintervaltime: this.form.brothertripintervaltime, //小哥行程间隔时间(客户组：分钟)
					mapwebkey: this.form.mapwebkey, //地图WebKey
					mapandroidkey: this.form.mapandroidkey, //地图安卓Key
					mapwxkey: this.form.mapwxkey, //地图微信Key
					cityids: this.cityids, //经营范围
					withdrawalsinglelimit: this.form.withdrawalsinglelimit, //限制微信一次提现金额
  					withdrawaldailylimit: this.form.withdrawaldailylimit, //限制微信每人每天提现金额
          			withdrawalautoexamine:this.form.withdrawalautoexamine,//提现自动审核金额
					ismaintain: this.form.ismaintain, //网站是否维护
					maintainmsg: this.form.maintainmsg, //网站维护信息,网站维护信息不能超过50个字
					wxbalanceremindvalue: this.form.wxbalanceremindvalue, //微信余额不足提醒值（元）
					userswapratio: this.form.userswapratio, //用户兑换积分比例
					swapratio: this.form.swapratio, //客户组兑换积分比例
					differenceratio: this.form.differenceratio //差额百分比
				}).then((res) => {
					// this.$message.success(res.msg);
					this.$message.success("修改成功");

					this.getsetting()
					this.setcity = false
				})
			},
			SelectSearchCity(cityidArr) { //搜索选择城市
				this.cityids = []
				cityidArr.forEach((item)=>{
					this.cityids.push(item[item.length - 1]);
				})
				console.log('cityids',this.cityids)
			},
			loadCity(node, resolve) { //加载城市
				this.$axios.post('/city/List', {
					pageIndex: 1,
					pageSize: 9999,
					pId: node.level == 0 ? '0' : node.value
				}).then((res) => {
					node = res.rows.map(function (c) {
						return {
							id: c.id,
							name: c.name,
							leaf: node.level >= 3
						}
					});
					resolve(node);
				})
			}
		}
	}
</script>

<style lang="scss">
	.link-blue{
		color: var(--blue);
		text-decoration: underline;
		font-size: 12px;
		cursor: pointer;
	}
</style>
